<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第2天-线上预约挂号</title>
</head>
<body>
    <div>
     <div class="top">
        <div class="nav">
            <div class="nav_name">东方医院</div>
            <div class="nav_li">
                <a href="#">首页</a>
                <a href="#">医院概况</a>
                <a href="#">医疗服务</a>
                <a href="#">科室导航</a>
                <a href="#">学术交流</a>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索科室，医生">
                <button>搜索</button>
            </div>
        </div>   
     </div>
     <div class="name">
        <h1 class="name1">线上预约挂号</h1>
        <h5 class="name2">东方医院</h5>
        <a class="name3">科室导航 / 门诊排班 / 就诊人管理 / 预约挂号</a>
     </div>
    </div>
    <div class="main">
        <div class="left">
            <p>科室导航</p>
            <div class="box1">
            <p>内科</p>
                <div class="box2">
                    <li style="border-bottom: 1px solid rgb(233, 236, 239)">
                    <a href="#">消化内科</a>
                    </li>
                    <li style="border-bottom: 1px solid rgb(233, 236, 239)">
                    <a href="#">神经内科</a>
                    </li>
                    <li><a href="#">呼吸内科</a></li>
                </div>
            </div>
      </div>
    </div>
        <div class="right">
            <p>东方名医</p>
            <div>
                <img src="./lucky.png" alt="">
                <div class="yisheng">
                    <p>华佗</p>
                    <span>主任医师 | 教授</span>
                    <span>神经外科</span>
                    <button>挂号</button>
                </div>
            </div>
            <div>
                <img src="./lucky.png" alt="">
                <div class="yisheng">
                    <p>华佗</p>
                    <span>主任医师 | 教授</span>
                    <span>神经外科</span>
                    <button>挂号</button>
                </div>
            </div>
            <div>
                <img src="./lucky.png" alt="">
                <div class="yisheng">
                    <p>华佗</p>
                    <span>主任医师 | 教授</span>
                    <span>神经外科</span>
                    <button>挂号</button>
                </div>  
            </div>
            <div>
                <img src="./lucky.png" alt="">
                <div class="yisheng">
                    <p>华佗</p>
                    <span>主任医师 | 教授</span>
                    <span>神经外科</span>
                    <button>挂号</button>
                </div>
            </div>
      </div>
        </div>

    </div>
</body>

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .top{
        height: 52px;
        margin: 0px auto;
        background-color: rgb(0, 123, 255);;
    }
    .nav {
        float: left;
        height: 50px;
        width: 100%;
        background-color: rgb(0, 123, 255);
      }
      .nav_name {
        float: left;
        color: white;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        height: 50px;
        width: 100px;
        margin-right: 20px;
      }
      .nav_li a {
        color: rgb(212, 203, 203);
        padding: 0 10px;
        float: left;
        width: 80px;
        height: 50px;
        line-height: 50px;
        text-decoration: none;
      }
      .nav_li a:hover {
        color: white;
      }
      .search {
        float: right;
        margin-right:10px;
        line-height: 48px;
      }
      .search input {
        padding-left: 5px;
        height: 30px;
        border-radius: 5px;
      }
      .search button {
        height: 30px;
        width: 50px;
        color: white;
        background-color: rgb(40, 167, 69);
        border-radius: 5px;
        border: 0;
      }
    .name{
        position: relative;
        height:170px;
        background-color: rgb(233, 236, 239);
    }
    .name .name1{
        font-size: 45px;
        font-weight: 300;
        margin-left: 100px;
        padding-top: 30px;
    }
    .name .name2{
        font-size: 15px;
        font-weight: 400;
        margin-left: 100px;
    }
    .name .name3{
        font-size: 12px;
        font-weight: 200;
        margin-top: 100px;
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
    .left {
        float: left;
        height: 150px;
        width: 200px;
        padding-left: 100px;
        padding-top: 10px;
      }
    .left p {
        font-size: 20px;
      }
      .box1 {
        height: 148px;
        width: 198px;
        border: 1px solid #ccc;
        margin-top: 10px;
      }
      .box1 p{
        margin: 0 20px;
        font-size: 16px;
        margin-top: 5px;
      }
      .box2 {
        margin: 0 20px;
        border: 1px solid #ccc;
        height: 100px;
        width: 150px;
        margin-top: 7px;
      }
      .box2 li {
        list-style-type: none;
      }
      .box2 li a {
        color: rgb(58, 144, 242);
        display: block;
        text-decoration: none;
        height: 32px;
        width: 148px;
        line-height:32px;
        font-size: 13px;
        padding-left: 10px;
        font-weight: 530;
      }
    .right {
        float: left;
        height: 150px;
        padding-left: 20px;
        padding-top: 10px;
    }
    .right p {
        font-size: 30px;
        font-weight: 330;
      }
    .right > div {
        float: left;
        height: 270px;
        width: 180px;
        margin-right: 30px;
        border: 1px solid rgb(223, 220, 220);
        box-shadow: 0px 0px 1px;
        margin-top: 18px;
    }
    .right img {
        display: block;
        height: 70px;
        width: 70px;
        border-radius: 35px;
        margin-top: 20px;
        margin-left: 60px;
        
      }
      .yisheng p{
        display: block;
        text-align: center;
        margin-top: 10px;
        font-size: 20px;
      }
      .yisheng span{
        display: block;
        text-align: center;
        font-size: 15px;
        margin-top: 15px;
      }
      .yisheng button{
        background-color: white;
        height: 25px;
        width: 40px;
        color: red;
        margin-top:25px;
        margin-left: 130px;
        border: 1px solid red;
        border-radius: 3px;
      }
</style>
</html>